<?php
/* Generieke definitie file */
include_once 'includes/defs/constants.php';
include_once 'includes/classes/datum.php';


require ('includes/connect.php');
include 'includes/classes/afdeling.php';
include 'includes/classes/week.php';




?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/xhtml" lang="nl">
<head>
<title>M in Events - Eigen rooster</title>

<LINK rel="stylesheet" href="includes/mystyle.css" type="text/css" /> 

<script type="text/javascript" src="includes/jquery.js"></script>
<script type="text/javascript" src="jquery.timePicker.js"></script>


  <style type="text/css">
  div {
    margin-top:0px;
  }
  input {
  margin:0;
  padding:0;
  }
  body {
    background: #eee;
  }
  pre {
    background:#fff;
    border:1px solid #ddd;
    padding:4px;
  }
  .error {
    border:1px solid red;
  }
  
  div.time-picker {
  position: absolute;
  height: 191px;
  width:4em; /* needed for IE */
  overflow: auto;
  background: #fff;
  border: 1px solid #aaa;
  z-index: 99;
  margin: 0;
}
div.time-picker-12hours {
  width:6em; /* needed for IE */
}

div.time-picker ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
div.time-picker li {
  cursor: pointer;
  height: 10px;
  font: 12px/1 Helvetica, Arial, sans-serif;
  padding: 4px 3px;
}
div.time-picker li.selected {
  background: #0063CE;
  color: #fff;
}
  </style>
  
  


<link rel="icon" href="images/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<link rel="favicon" href="images/favicon.ico" type="image/x-icon" />

</head>

<body>
    
    
    
<div id="wrapper">
	<div id="circle">
		<div id="header">
			<div id="header-left">
				<div id="koptekst">
					Rooster
				</div>
			</div>
			<div id="header-right">
                            <a href="optie.php"><img src="images/instellingen.png" border="0"></a>
				<img src="images/faq.png">
				<img src="images/uitloggen.png">
				<div id="naam">
					<p style="font-size: 14px;">Ingelogd als:</br></p>
					<p style="font-size: 26px;"><b>Tim van den Elsen</b></br></p>
				</div>
			</div>
		</div>
		<div id="content-wrapper">
			<div id="menu-left">
				<div id="menu-left-content">
					<a href="http://localhost/minevents-svn/" style="text-decoration: none" >
					<img src="images/home_button.png"> </a>
				</div>
			</div>
			<div id="menu-right1">
				<div id="menu-rooster">
					<img src="images/menu_button.png"/>
				</div>
				<div id="menu-afdeling">
					<img src="images/menu_button.png"/>
				</div>
                            
                        
				
			</div>
			<div id="menu-right2">
				<div id="menu-rooster-text">
					<a href="rooster.php" style="text-decoration: none" >
					Rooster aanmaken </a>
				</div>
				
				<div id="menu-wijzigen-text">
				<a href="overzicht.php" style="text-decoration: none" >
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Overzicht </a>
				</div>
                            
                         
                            
                            
			</div>
			<div id="content">
				<div id="content-koptekst">
					<b>Rooster aanmaken</b>
				</div>
                            
                          
                            <?php //if($_GET['next'] == 1 ){ echo  active; } ?>
				<div id="content01">
                                    <table>
                                        <tr>
                                      <td>Week:   </td> 
                                     <td> <select name="week_nr" onChange="location = this.options[this.options.selectedIndex].value">
                                          <option value="#">Selecteer een weeknummer</option>
                                          <option value="?week=<?php echo date("W") ?>"><?php echo date("W") ?></option>
                                      </select></td>
                                      
                                        </tr>
                                      <tr>
                                      
                                      <td> Personeel:    </td>
                                   <td>   <select name="week_nr" onChange="location = this.options[this.options.selectedIndex].value">
                                          <option value="#">Selecteer een personeelslid</option>
                                          <option value=""></option>
                                      </select></td>
                                      </tr>
					</table>
				</div>
				<div id="content02">
					<div id="tabel">
						<table name="table" border="0" cellspacing="5" cellpadding="2">
							<tr>
                                                            <td><b>Week <?php echo date("W") ?></b></td>
								<td><b> Van: </b></td>
								<td><b> Tot: </b></td>
								<td><b> Afdeling: </b></td>
                                                                <td><b> Bijlage: </b></td>
                                                                <td> </td>
							</tr>
							
     
	
                                          
                                                        <?php
                                                        $week = new Week();
                                                        
                                                        $week_list = $week->show_week_list();
                                                        
                                                        foreach ($week_list as $aantal => $week_item) {
                                                            
                                                        ?>
             <tr>
                 <td>
                     
            <?php echo $week_item['dag']; ?>
               
     
                 </td>
                 
                  <script type="text/javascript">
  jQuery(function() {
    // Default.
    $("#<?php echo $week_item['dag_id']; ?>time1").timePicker();
    // 02.00 AM - 03.30 PM, 15 minutes steps.
    $("#<?php echo $week_item['dag_id']; ?>time2").timePicker({
  startTime: "02.00",  // Using string. Can take string or Date object.
  endTime: new Date(0, 0, 0, 15, 30, 0),  // Using Date object.
  show24Hours: false,
  separator:'.',
  step: 15});
    
    // An example how the two helper functions can be used to achieve 
    // advanced functionality.
    // - Linking: When changing the first input the second input is updated and the
    //   duration is kept.
    // - Validation: If the second input has a time earlier than the firs input,
    //   an error class is added.
    
    // Use default settings
    $("#<?php echo $week_item['dag_id']; ?>time3, #<?php echo $week_item['dag_id']; ?>time4").timePicker();
        
    // Store time used by duration.
    var oldTime = $.timePicker("#<?php echo $week_item['dag_id']; ?>time3").getTime();
    
    // Keep the duration between the two inputs.
    $("#<?php echo $week_item['dag_id']; ?>time3").change(function() {
      if ($("#<?php echo $week_item['dag_id']; ?>time4").val()) { // Only update when second input has a value.
        // Calculate duration.
        var duration = ($.timePicker("#<?php echo $week_item['dag_id']; ?>time4").getTime() - oldTime);
        var time = $.timePicker("#<?php echo $week_item['dag_id']; ?>time3").getTime();
        // Calculate and update the time in the second input.
        $.timePicker("#<?php echo $week_item['dag_id']; ?>time4").setTime(new Date(new Date(time.getTime() + duration)));
        oldTime = time;
      }
    });
    // Validate.
    $("#<?php echo $week_item['dag_id']; ?>time4").change(function() {
      if($.timePicker("#<?php echo $week_item['dag_id']; ?>time3").getTime() > $.timePicker(this).getTime()) {
        $(this).addClass("error");
      }
      else {
        $(this).removeClass("error");
      }
    });
    
  });
  </script>

<script type="text/javascript">
// Use default settings
$("#<?php echo $week_item['dag_id']; ?>time3, #<?php echo $week_item['dag_id']; ?>time4").timePicker();
    
// Store time used by duration.
var oldTime = $.timePicker("#<?php echo $week_item['dag_id']; ?>time3").getTime();

// Keep the duration between the two inputs.
$("#<?php echo $week_item['dag_id']; ?>time3").change(function() {
  if ($("#<?php echo $week_item['dag_id']; ?>time4").val()) { // Only update when second input has a value.
    // Calculate duration.
    var duration = ($.timePicker("#<?php echo $week_item['dag_id']; ?>time4").getTime() + 8);
    var time = $.timePicker("#<?php echo $week_item['dag_id']; ?>time3").getTime() + 8;
    // Calculate and update the time in the second input.
    $.timePicker("#<?php echo $week_item['dag_id']; ?>time4").setTime(new Date(new Date(time.getTime() + 8)));
    oldTime = time;
  }
});
// Validate.
$("#<?php echo $week_item['dag_id']; ?>time4").change(function() {
  if($.timePicker("#<?php echo $week_item['dag_id']; ?>time3").getTime() > $.timePicker(this).getTime()) {
    $(this).addClass("error");
  }
  else {
    $(this).removeClass("error");
  }
});
</script>  
                 
                 
		<td> <div> <input type="text" name="-van" id="<?php echo $week_item['dag_id']; ?>time3" size="10" value="00:00" /> </div> </td>
		<td> <div> <input type="text" name="-tot" id="<?php echo $week_item['dag_id']; ?>time4" size="10" value="08:00" /> </div> </td>
                <input type="hidden" name="week" value="<?php echo date("W"); ?>" />
                <td> 
                    
                    <select name="afdeling">
                     <?php
                  
                    $afdeling = new Afdeling();
                     
                    $afdeling_list = $afdeling->select_afdeling_lijst();
                     
                    foreach($afdeling_list as $afdeling_item){
                        
                    ?>
                    <option value="<?php echo $afdeling_item['afdeling_id']; ?>"><?php echo $afdeling_item['afdeling_naam']; ?></option>
                    <?php
                    }
                   ?>
                     </select>
                    
                </td>
             
                <td> <input type="file" name="-uploadwerkz" style="width: 200px"/> </td>
	</tr>
                                                    <?php
                                                        }
                                                        ?>
          
                    
                  
	
                                         
						
                                    
						
					
					

                                    	<tr>
                                            <td>
                                          
                                                 
                                            </td>
                                        </tr>
                                    
                                    </table>
                                            
                                              

                                            <b>Totaal aantal uur:</b> 0 uur en 0 minuten<small> <br/>(Als er geen eindtijd is ingevuld staat een werkdag standaard op 8 uur)</small>
                     
                                          </div>
					
   <div id="content-opslaan">
							<a href="includes/rooster.php"class="content-opslaan"></a>
						</div>
                                  
				</div>
			</div>
		</div>
		<div id="footer">
			Realisatie: Stichting Innovision Solutions
		</div>
	</div>
</div>
</body>
</html>